<template>
  <div class="tableListPage">
    <!-- 搜索区域 -->
    <div class="tableListSearch">
      <under-review-search @clickbtn="handleSearch"></under-review-search>
    </div>
    <!-- 列表区域 -->
    <div class="tableListMain commonTableSty"  style="height:calc(100% - 90px)">
      <under-review-table-list ref="dealingTableCompt" @operateRow="handleRowOperation" ></under-review-table-list>
    </div>
    <!-- 撤回弹框 -->
    <a-modal
      :title="$t('systemTip')"
      :visible="isVisible"
      :closable="false"
      @ok="handleRejectOk1"
      @cancel="handleCancel1"
    >
      <p >{{$t('withdrawApplyTip')}}</p>
      <a-form-model ref="createModal" :model="model" :rules="validatorRules">
        <a-form-model-item prop="cancelReason" >
        <span slot="label" style="font-weight:bold">
          {{ $t('撤回原因') }}
        </span>
          <a-textarea v-model="model.cancelReason" placeholder="请填写撤回原因" :rows="4" allow-clear />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import UnderReviewSearch from './components/UnderReviewSearch.vue'
import UnderReviewTableList from './components/UnderReviewTableList.vue'
import { checkTextLen } from '@/utils/validate'
export default {
  components: {
    UnderReviewSearch,
    UnderReviewTableList
  },
  computed: {},
  data () {
    return {
       isVisible:false,
      model:{
        cancelReason:undefined
      },
      validatorRules:{
        cancelReason: [{ required: true, message: this.$t('pleaseInput') }, { validator: checkTextLen(200) }],
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 查询表格数据
    handleSearch () {
      this.$refs.dealingTableCompt.refreshData(true)
    },
    // 表格传递上来的事件
    handleRowOperation (data) {
      // 按照type分发事件
      this[data[0]](data[1])
    },
    // 催办
    urge (data) {
      const vm = this
      this.$confirm({
        title: vm.$t('systemTip'),
        content: vm.$t('urgeApplyTip'),
        onOk () {
          // eslint-disable-next-line no-unused-vars
          vm.$api.urgeMyApply({ instanceId: data.instanceId }).then((res) => {
            vm.$message.success(vm.$t('5089'))
          // eslint-disable-next-line no-unused-vars, handle-callback-err
          }).catch((error) => {
            vm.$refs.dealingTableCompt.refreshData(false)
          })
        },
        onCancel () { }
      })
    },
    // 审核流程查看
    auditProcess (data) {
      this.$router.push({ path: '/todo/applicationContent',
        query: {
          id: data.instanceId,
          swcode: data.businessCode,
          key: data.businessKey,
          toReview:1,
          // 是从我的申请跳转过去还是从我的审核跳转过去，会影响底部的操作信息栏加载
          aorr: 'a',
          status: data.instanceStatus } })
    },
    // 撤回
    revoke (data) {
     this.isVisible=true
      this.$nextTick(() => {
          this.$refs.createModal.resetFields()
      })
      this.model.instanceId=data.instanceId
    },
     handleRejectOk1(){
      const vm = this
      vm.$refs.createModal.validate(valid => {
        if (valid) {
          vm.$api.cancelMyApply(this.model).then(() => {
            vm.$message.success(vm.$t('withdraw') + vm.$t('success'))
            vm.isVisible=false
            vm.$refs.dealingTableCompt.refreshData(false)
          })
        }
      })
    },
    handleCancel1(){
       this.isVisible=false
    },
  }
}
</script>
<style lang="less" scoped>
.tableListPage {
  height: 100%;
  overflow: hidden;
  .tableListAction {
    margin-top: 16px;
    button {
      margin-right: 16px;
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .tableListMain {
    margin-top: 16px;
  }
}
</style>
